<script setup>
import IconList from './icon.vue';
import { ElPagination, ElSelect, ElOption } from 'element-plus';
import { listIcons } from '@iconify/vue';
import { ref, watch, computed } from 'vue';

const emits = defineEmits(['change']);

const iconType = ref('ep');
const icons = ref(listIcons());
const total = computed(() => Math.floor(icons.value.length / 6));

const page = ref(1);
const current = ref(icons.value[0]);
const iconRef = ref(null);

const changeIcons = () => {
  if (iconType.value === 'all') {
    icons.value = listIcons();
  } else {
    icons.value = listIcons('', iconType.value);
  }
  page.value = 1;
};

const setIconName = index => {
  current.value = icons.value[index];
};

watch(page, val => {
  iconRef.value.changePage(val);
});

watch(icons, val => {
  iconRef.value.changePage(val);
});

const confirm = () => {
  emits('change', current.value);
};
</script>
<template>
  <div class="w-full">
    <div class="mb-1px flex flex-row items-center">
      <el-select class="w-1/3" size="small" v-model="iconType" @change="changeIcons">
        <el-option label="全部" value="all" />
        <el-option label="Element Plus" value="ep" />
        <el-option label="Antd" value="ant-design" />
        <el-option label="Icon Park" value="icon-park" />
        <el-option label="Icon Park Outline" value="icon-park-outline" />
        <el-option label="Icon Park Solid" value="icon-park-solid" />
      </el-select>
      <div class="box-border pl-3 font-size-12px">
        <span class="text-gray-500">当前图标：</span>
        <span class="text-gray-700 text-ellipsis">{{ current }}</span>
      </div>
    </div>
    <IconList :list="icons" :page="page" @change="setIconName" ref="iconRef" :rows="5" :cols="12" />
    <div class="flex justify-between flex-row w-full items-center mt-1">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :pager-count="5"
        v-model:current-page="page"
        size="small"
      />
      <a-button type="primary" size="small" @click="confirm">确定</a-button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
